<template>
  <div>
    <div class="content">
        <div class="topsss">
            <div>热销榜</div>
            <div class="right">更多<van-icon name="arrow" /></div>
        </div>
        <div class="center">
            <div class="box" v-for="(v,index) in imgs" :key="index">
                <img :src="v" alt="">
                <p>{{text[index]}}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            imgs: [],
            befor: [],
            money: [],
            text:[]
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/HotList"
        }).then(res => {
            // console.log(res.data[0].data);
            this.imgs = res.data[0].data.img
            this.text = res.data[0].data.text
        })
    }

}
</script>

<style  scoped>
 .content{
    background-color: #ffffff;
    width: 95vw;
    height: 50vw;
    margin: auto;
    margin-top: 4vw;
    border-radius: 3vw;
    padding-top: 2vw;
}
.topsss{
    display: flex;
    margin-left: 4vw;
    color: black;            
}
.right{
    margin-left: 60vw;
    text-indent: 0;
    color: #bbb1b6;
}
.center{
    width: 95vw;
    height: 43vw;
    display: flex;
    overflow: scroll;
            
}
.box{
    width: 22vw;
    height: 39vw;
    margin-top: 2vw;
    background-color: #ffffff;
    margin-left: 1.5vw;
    border-radius: 1vw;
}
.box img{
    width: 20vw;
    padding: 1vw;
}
.box p{
    font-size: 2vw;
    margin-top: 1vw;
    color: #8d939c;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
</style>